<template>
	<div>
	<!--面包屑-->
	<el-breadcrumb separator-class="el-icon-arrow-right">
	  <el-breadcrumb-item :to="{ path: '/adminHome/center' }">首页</el-breadcrumb-item>
	  <el-breadcrumb-item>员工信息管理</el-breadcrumb-item>
	  <el-breadcrumb-item>新增员工</el-breadcrumb-item>
	</el-breadcrumb>
	<!--内容列表-->
	<el-card>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="员工姓名" prop="name">
       <el-input v-model="ruleForm.name"></el-input>
     </el-form-item>

     <el-form-item label="部门" prop="departmentID">
        		  <el-select v-model="ruleForm.departmentID" placeholder="请选择部门" @change="handleDepartmentChange">
        		    <el-option
        		      v-for="department in departments"
        		      :key="department.departmentID"
        		      :label="department.departmentName"
        		      :value="department.departmentID">
        		    </el-option>
        		  </el-select>
        		</el-form-item>

				<el-form-item label="职位" prop="positionID">
        		  <el-select v-model="ruleForm.positionID" placeholder="请选择职位" @change="handlePositionChange">
        		    <el-option
        		      v-for="position in positions"
        		      :key="position.positionID"
        		      :label="position.positionName"
        		      :value="position.positionID">
        		    </el-option>
        		  </el-select>
        		</el-form-item>

     <el-form-item label="入职日期" required>
       <el-col :span="11">
         <el-form-item prop="birthdate">
           <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthdate" style="width: 100%;"></el-date-picker>
         </el-form-item>
       </el-col>
       <el-col class="line" :span="2">-</el-col>
        </el-form-item>
        
	      <el-form-item label="电话" prop="phone">
	        <el-input v-model="ruleForm.phone"></el-input>
	      </el-form-item>

        <el-form-item label="邮箱" prop="email">
	        <el-input v-model="ruleForm.email"></el-input>
	      </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="submitForm()">立即添加</el-button>
       <el-button @click="resetForm('ruleForm')">重置</el-button>
     </el-form-item>
   </el-form>
   </el-card>
   </div>
</template>

<script>

export default {
  name: 'OutHouseView',
  components: {

  },
  data() {
        return {

          departments: [],
          positions: [],

          ruleForm: {
            name: '',
            birthdate: '',
            phone: '',
            email: '',
            departmentID: '',
            positionID: ''
          },
          rules: {
            name: [
              { required: true, message: '请输入姓名', trigger: 'blur' }
            ],
            birthdate: [
              { required: true, message: '请选择出生日期', trigger: 'change' }
            ],
            phone: [
              { required: true, message: '请输入电话号码', trigger: 'blur' },
              { pattern: /^1[3456789]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' }
            ],
            email: [
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱地址格式不正确', trigger: 'blur' }
            ],
            departmentID: [
              { required: true, message: '请选择部门', trigger: 'change' }
            ],
            positionID: [
              { required: true, message: '请选择职位', trigger: 'change' }
            ]
          }
        };
      },

      mounted() {
			  this.getDepartments();
			  this.getPositions();
		  },

      methods: {

        getDepartments() {
   			  this.axios.post('/DepartmentsList',{})
   			   .then(response => {
   			      this.departments = response.data.data.list;
				      console.log(this.departments);
   			    })
   			   .catch(error => {
   			      console.error(error);
   			    });
   			},
   			getPositions() {
   			  this.axios.post('/PositionsList',{})
   			   .then(response => {
   			      this.positions = response.data.data.list;
				      console.log(this.positions);
   			    })
   			   .catch(error => {
   			      console.error(error);
   			    });
   			},

         handleDepartmentChange() {
          // 当部门选择改变时，重新获取部门列表
          this.getDepartments();
        },
        handlePositionChange() {
          // 当职位选择改变时，重新获取职位列表
          this.getPositions();
        },
		  
        submitForm() {
            this.axios.post('/EmployeesAdd', this.ruleForm)
			
           .then(response => {
              console.log(response.data);
			        this.$message.success('添加成功'); 
              this.$router.push('/adminHome/inHouse',()=>{},()=>{});
            })
           .catch(error => {
              console.error(error);
            });
        },
		
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }

}
</script>

<style scoped>
	
</style>